<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>02_webpack输入输出写法</title>
  <!-- 
  Webpack 是一个现代 JavaScript 应用程序的静态模块打包器。它的主要功能是将应用程序的所有资源（JavaScript、CSS、图片等）打包成一个或多个文件，以便在浏览器中更高效地加载。
  1. 输入（Entry）
  输入是指 Webpack 从哪里开始构建依赖图。可以指定一个或多个入口点。

   1.1 单入口
  单入口是指只有一个入口文件，Webpack 将从这个文件开始构建依赖关系。
  // webpack.config.js
  module.exports = {
      entry: './src/index.js', // 指定入口文件
      // 其他配置...
  };
   1.2 多入口
  多入口是指有多个入口文件，Webpack 会为每个入口文件生成一个对应的输出文件。
  // webpack.config.js
  module.exports = {
      entry: {
          app: './src/app.js',
          admin: './src/admin.js'
      },
      // 其他配置...
  };
  2. 输出（Output）
  输出是指 Webpack 将构建的文件输出到哪里。可以指定输出文件的路径和文件名。

   2.1 输出路径和文件名
  通过  `output`  属性配置输出的路径和文件名。
  // webpack.config.js
  const path = require('path');

  module.exports = {
      entry: './src/index.js',
      output: {
          path: path.resolve(__dirname, 'dist'), // 输出目录
          filename: 'bundle.js' // 输出文件名
      },
      // 其他配置...
  };
   2.2 动态文件名
  可以使用占位符动态生成文件名，例如根据入口名称生成不同的输出文件名。
  // webpack.config.js
  module.exports = {
      entry: {
          app: './src/app.js',
          admin: './src/admin.js'
      },
      output: {
          path: path.resolve(__dirname, 'dist'),
          filename: '[name].bundle.js' // 根据入口名称生成文件名
      },
      // 其他配置...
  };
  3. 总结
  在 Webpack 中，输入和输出是构建过程的核心部分。通过配置  `entry`  来指定应用程序的入口点，并通过  `output`  来定义构建结果的输出位置和文件名。理解这些配置对于使用 Webpack 进行项目打包至关重要。通过合理配置输入输出，可以优化资源加载，提高应用程序的性能和效率。
  -->
</head>
<body>
  
</body>
</html>